@screen-sm-min : 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@color-bg: rgb(240, 235, 232);
body {
    margin: 0;
    line-height: 1.42857143;
    color: #333;
    background-color: #333;
}


/* 超小屏幕（手机，小于 768px） */

.container {
    margin-left: auto;
    margin-right: auto;
}


/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */


/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) {}


/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) {
    .container {
        width: @screen-sm-min;
        // height: 100%;
    }
}


/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) {}

.container {
    background-color: @color-bg;
}

.panel {
    margin-bottom: 15px;
    background-color: #fff;
}

.panel-title {
    padding: 15px;
    border-bottom: 1px solid @color-bg;
}

.panel-body {
    padding: 15px;
    p {
        margin: 0;
    }
}

.list-group {
    padding-left: 0;
    margin-bottom: 15px;
}

.list-group-item {
    padding: 10px 15px;
    background-color: #fff;
    &:not(:first-child) {
        border-top: 1px solid #ddd;
    }
}

.swiper-container {
    width: 100%;
    height: 320px;
}

.key {
    color: #666;
}

.value {
    float: right;
}

div.value {
    font-size: 0;
    img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }
    span {
        margin-left: .8em;
        font-size: 16px;
        vertical-align: middle;
    }
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.swiper-slide {
    img {
        width: 100%;
        height: 100%;
    }
}